<template>
  <div class="modPage" @mouseover="showset" @mouseout="hideset" :style="{color:defaultmoddata.config.fontcolor}">
    <div class="title" v-show="defaultmoddata.config.titleshow">
      <div class="titlecon">
        <div class="title-box">{{defaultmoddata.config.title}}</div>
      </div>
    </div>
    <div class="modPagecontent clearstyle" v-html="defaultmoddata.config.content"></div>
    <div class="mask" v-show="maskshow">
      <div class="settingbtn" @click="headset"><i class="el-icon-setting"></i> 设置</div>
      <div class="deletebtn" @click="deletemod"><i class="el-icon-delete"></i> 删除</div>
    </div>
    <div class="bg"></div>
  </div>
</template>

<script>
    export default {
        props: ["taskdata", "moddata" ,"index","container"],
        data: function () {
            return {
                maskshow: false,
            }
        },
        computed:{
            defaultmoddata(){
                if(this.moddata){
                    return this.moddata
                }else{
                    return this.container.items[this.$route.params.index]
                }
            }
        },
        methods: {
            showset: function () {
                this.maskshow = true;
            },
            hideset: function () {
                this.maskshow = false;
            },
            headset: function () {
                this.$emit('setmod', 'MyMod', this.index, "BasicModule")
            },
            deletemod: function () {
                this.$emit("delreq", this.index)
            }
        }
    }
</script>

<style scoped>
  .modPage {
    position: relative;
  }

  .modPage .modPagecontent {
    padding: .444444rem;
    overflow-x: hidden;
    min-height: 2.222222rem;
  }
</style>